<template>
  <div class="fire-career pad">
    <div class="head">
      <span>职务管理</span>
    </div>
    <div
      style="display: flex; justify-content: space-between;"
      class="m-t-b"
    >
      <div>
        <el-input
          v-model="searchText"
          placeholder="输入身份/职务名称搜索"
          style="width: 260px;"
          @input="clearSearch"
          @keypress.native.enter="handleSearch"
          clearable
        />
        <el-button
          type="primary"
          style="margin-left: 10px;"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button
        type="primary"
        @click="openAddCareerDialog"
      >
        <i class="el-icon-plus"></i>
        添加身份/职务
      </el-button>
    </div>
    <el-tabs type="border-card" class="m-t-b" v-model="tabActiveIndex" @tab-click="tabClick">
      <el-tab-pane label="身份" name="1">
        <el-table :data="identityList" border stripe v-loading="identityLoading">
          <el-table-column label="身份" prop="fireIdentity"></el-table-column>
          <el-table-column label="创建时间" prop="createDate"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                circle
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagi"
          :total="identityTotal"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="职务" name="2">
        <el-table :data="careerList" border stripe v-loading="careerLoading">
          <el-table-column label="职务" prop="firePosition"></el-table-column>
          <el-table-column label="创建时间" prop="createDate"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                circle
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="handlePagi"
          :total="careerTotal"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="careerDialogTitle" :visible.sync="showCareerDialog">
      <el-form :model="career" label-position="top" ref="career" :rules="rules">
        <el-form-item label="类型">
          <el-radio-group v-model="career.fireType" @change="changeType">
            <el-radio :label="1">身份</el-radio>
            <el-radio :label="2">职务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份" prop="fireIdentity" v-if="career.fireType == 1">
          <el-input v-model="career.fireIdentity" />
        </el-form-item>
        <el-form-item label="职务" prop="firePosition" v-if="career.fireType == 2">
          <el-input v-model="career.firePosition" />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="addCareer"
        :loading="addLoading"
      >保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {
  createFiremanCareer,
  updateFiremanCareer,
  getFiremanCareer,
  deleteFiremanCareer
} from '../api/version2'
import { formatDate } from '../util';
export default {
  name: 'FiremanCareer',
  data () {
    return {
      searchText: '',
      tabActiveIndex: '1',
      showCareerDialog: false,
      careerDialogTitle: '添加身份/职务',
      career: {
        fireType: 2, // 1: 身份 2: 职务
        fireIdentity: null, // 身份
        firePosition: null // 职务
      },
      identityTotal: 0,
      identityList: [],
      careerTotal: 0,
      careerList: [],
      identityLoading: false,
      careerLoading: false,
      addLoading: false,
      tableLoading: false,
      pageSize: 10,
      rules: {
        fireIdentity: [
          { required: true, message: '身份不能为空', trigger: 'blur' }
        ],
        firePosition: [
          { required: true, message: '职务不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    openAddCareerDialog () { // 打开添加弹出框
      this.career.fireType = 2;
      this.career.fireIdentity = '';
      this.career.firePosition = '';
      this.careerDialogTitle = '添加身份/职务';
      this.showCareerDialog = true
    },
    handleSearch () { // 搜索事件
      if (!this.searchText.trim()) {
        return this.$message.error('请输入有效搜索内容')
      };
      this.fetchCareerList(1, 1);
      this.fetchCareerList(1, 2)
    },
    handleDelete (row) { // 删除职务
      this.$confirm(`确定删除该${row.fireType == 1 ? '身份' : '职务'}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        deleteFiremanCareer(row.fireId)
        .then(res => {
          this.$message.success('删除成功');
          this.fetchCareerList(1, row.fireType)
        })
        .catch(e => {

        })
      })
      .catch(err => {

      })
    },
    clearSearch () { // 清除搜索
      if (!this.searchText) {
        this.fetchCareerList(1, 1);
        this.fetchCareerList(1, 2)
      }
    },
    tabClick () { // tab切换事件
      // if (this.tabActiveIndex == 2 && !this.careerList.length) {
      //   this.fetchCareerList(1)
      // }
    },
    addCareer () { // 添加职务
      this.$refs.career.validate(valid => {
        this.addLoading = true;
        if (valid) {
          if (this.careerDialogTitle == '添加身份/职务') {
            createFiremanCareer(this.career)
            .then(res => {
              this.$message.success('添加成功!');
              this.showCareerDialog = false;
              this.addLoading = false;
              this.fetchCareerList(1, this.career.fireType)
            })
            .catch(e => {
              this.addLoading = false
            })
          } else {

          }
        } else {
          return false
        }
      })

    },
    handlePagi (page) { // 分页事件
      this.fetchCareerList(page)
    },
    fetchCareerList (index, type) { // 查询职务列表
      const loadingKey = this.tabActiveIndex == 1 ? 'identityLoading' : 'careerLoading';
      this[loadingKey] = true;
      type = type || this.tabActiveIndex;
      getFiremanCareer({
        index,
        count: this.pageSize,
        queryParam: {
          fireType: type,
          fireIdentity: type == 1 ? (this.searchText || null) : null,
          firePosition: type == 2 ? (this.searchText || null) : null
        }
      })
      .then(res => {
        this[loadingKey] = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:')
        });
        console.log(list)
        this[type == 1 ? 'identityList' : 'careerList'] = list;
        this[type == 1 ? 'identityTotal' : 'careerTotal'] = res.data.data.totalRecord
      })
      .catch(e => {
        this[loadingKey] = false
      })
    },
    changeType (e) { // 修改类型
      this.career[e === 1 ? 'firePosition' : 'fireIdentity'] = null
    }
  },
  created () {
    this.fetchCareerList(1, 1);
    this.fetchCareerList(1, 2)
  }
}
</script>
<style lang="scss">

</style>
